<template>
<svg width="60px" height="60px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
    <title>插画480@1x</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#FFFFFF" stop-opacity="0.200639205" offset="0%"></stop>
            <stop stop-color="#FFFFFF" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="插画480" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="music" transform="translate(20.000000, 32.000000)">
            <g id="bg">
                <path d="M232.693763,400.559363 C109.03716,390.360796 9.67031405,308.156531 15.8596422,208.074603 C21.1626035,120.235551 101.248362,0.817703757 222.942592,0.0051538664 C344.636823,-0.807396024 434.310586,94.5690471 439.776713,208.074603 C437.836661,323.800736 323.468312,420.020179 232.693763,400.559363 Z" id="1" fill="#9F8FF8" opacity="0.200000003"></path>
                <path d="M232.693763,400.559363 C109.03716,390.360796 9.67031405,308.156531 15.8596422,208.074603 C21.1626035,120.235551 101.248362,0.817703757 222.942592,0.0051538664 C344.636823,-0.807396024 434.310586,94.5690471 439.776713,208.074603 C437.836661,323.800736 323.468312,420.020179 232.693763,400.559363 Z" id="1" fill="#9F8FF8" opacity="0.200000003"></path>
                <path d="M232.693763,400.559363 C109.03716,390.360796 9.67031405,308.156531 15.8596422,208.074603 C21.1626035,120.235551 101.248362,0.817703757 222.942592,0.0051538664 C344.636823,-0.807396024 434.310586,94.5690471 439.776713,208.074603 C437.836661,323.800736 323.468312,420.020179 232.693763,400.559363 Z" id="1" fill="#9F8FF8" opacity="0.200000003"></path>
                <path d="M232.693763,400.559363 C109.03716,390.360796 9.67031405,308.156531 15.8596422,208.074603 C21.1626035,120.235551 101.248362,0.817703757 222.942592,0.0051538664 C344.636823,-0.807396024 434.310586,94.5690471 439.776713,208.074603 C437.836661,323.800736 323.468312,420.020179 232.693763,400.559363 Z" id="1" fill="#9F8FF8" opacity="0.200000003"></path>
                <path d="M232.693763,400.559363 C109.03716,390.360796 9.67031405,308.156531 15.8596422,208.074603 C21.1626035,120.235551 101.248362,0.817703757 222.942592,0.0051538664 C344.636823,-0.807396024 434.310586,94.5690471 439.776713,208.074603 C437.836661,323.800736 323.468312,420.020179 232.693763,400.559363 Z" id="1" fill="#9F8FF8" opacity="0.200000003"></path>
            </g>
            <path d="M220,122 C273.571621,122 317,165.712254 317,219.634053 L316.999,219.82 L316.813879,219.819882 C316.935788,220.381686 317,220.965004 317,221.563319 L317,239.816872 C317,244.336289 313.336289,248 308.816872,248 C304.297456,248 300.633745,244.336289 300.633745,239.816872 L300.633745,221.563319 C300.633745,220.965004 300.697957,220.381686 300.819866,219.819882 L300.678568,219.820484 L300.678776,219.634053 C300.678776,174.785138 264.557658,138.427909 220,138.427909 C175.442342,138.427909 139.321224,174.785138 139.321224,219.634053 L139.323,219.82 L139.180134,219.819882 C139.302043,220.381686 139.366255,220.965004 139.366255,221.563319 L139.366255,239.816872 C139.366255,244.336289 135.702544,248 131.183128,248 C126.663711,248 123,244.336289 123,239.816872 L123,221.563319 C123,220.965004 123.064212,220.381686 123.186121,219.819882 L123.000173,219.820433 L123,219.634053 C123,165.712254 166.428379,122 220,122 Z" id="形状结合" fill="#FFFFFF"></path>
            <path d="M132.315217,215 C145.191856,215 155.630435,225.438578 155.630435,238.315217 L155.630435,258.684783 C155.630435,271.561422 145.191856,282 132.315217,282 C119.438578,282 109,271.561422 109,258.684783 L109,238.315217 C109,225.438578 119.438578,215 132.315217,215 Z M305.684783,215 C318.561422,215 329,225.438578 329,238.315217 L329,258.684783 C329,271.561422 318.561422,282 305.684783,282 C292.808144,282 282.369565,271.561422 282.369565,258.684783 L282.369565,238.315217 C282.369565,225.438578 292.808144,215 305.684783,215 Z" id="形状结合" fill="url(#linearGradient-1)"></path>
        </g>
    </g>
</svg>
</template>
<style scoped>
#music #bg path {
  animation: rotate 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  transform-origin: center center;
}
#music #bg path:last-child {
  animation-delay: 0s;
  animation-duration: 4s;
}

#music #bg path:nth-child(4) {
  animation-delay: -1s;
  animation-duration: 6s;
}

#music #bg path:nth-child(3) {
  animation-delay: -2s;
  animation-duration:8s;
}
#music #bg path:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
#music #bg path:nth-child(1) {
  animation-delay: -4s;
  animation-duration: 12s;
}
@keyframes rotate {
  0% {
    transform: scale(.6) ;
  }
  25% {
    transform: scale(.8) ;
  }
  50% {
    transform: scale(1) ;
  }
  75% {
    transform: scale(.8);
  }
  100% {
    transform: scale(.6) ;
  }
}
</style>